<template>
	<div class="layout-side-menu" :class="cMenuClassName">
		<div>
			<a-menu
				:selected-keys="cSelectedKey"
				style="width: var(--side-width)"
				mode="inline"
				:open-keys="cMenuOpenKeys"
				:inline-collapsed="props.collapsed"
				@open-change="OpenChange"
				@select="({ key }) => emits('click', key as string)"
			>
				<template :key="firstItem.id" v-for="firstItem in cMenus">
					<template v-if="firstItem.ext?.menuType !== 'directory'">
						<div
							v-if="firstItem.title === '系统管理'"
							style="width: 115px; height: 1px; margin: 22px auto; background: rgba(62, 68, 97, 0.4)"
						></div>
						<a-menu-item :id="firstItem.code" :key="firstItem.path">
							<template #icon>
								<global-svg-icon
									:icon-name="firstItem.ext?.icon"
									:color="cIconColor(firstItem.path)"
									width="16px"
									height="16px"
								></global-svg-icon>
							</template>

							<span class="font-14">{{ firstItem.title }}</span>
						</a-menu-item>
					</template>

					<!-- 二级菜单 -->
					<template v-else-if="firstItem.ext?.menuType === 'directory'">
						<a-sub-menu :key="firstItem.path">
							<!-- 二级父菜单 -->
							<template #icon>
								<global-svg-icon :icon-name="firstItem.ext?.icon" width="16px" height="16px"></global-svg-icon>
							</template>

							<template #title>
								<span class="font-14">{{ firstItem.title }}</span>
							</template>

							<!-- 二级子菜单 -->
							<a-menu-item :key="secondMenu.path" v-for="secondMenu in firstItem.childList">
								<span class="font-14">{{ secondMenu.title }}</span>
							</a-menu-item>
						</a-sub-menu>
					</template>
				</template>
			</a-menu>
		</div>
	</div>
</template>

<script setup lang="ts" name="LayoutSideMenu">
import { g6StorageValue } from 'glasssix-utils-ts';
import type { TsLayout } from '../../types';

const props = withDefaults(defineProps<TsLayout.SideProps>(), {
	actives: () => [],
	collapsed: true,
	topKey: ''
});

const emits = defineEmits<{
	(e: 'click', key: string): void;
	(e: 'collapsed', flag: boolean): void;
}>();
const route = useRoute();

// SubMenu 展开/关闭的回调
const OpenChange = (openKeys: Array<string | number>): void => {
	g6StorageValue.save('session', 'menuOpenKeys', JSON.stringify(openKeys));
};

// 防抖模式监听电脑的显示屏窗口尺寸, 宽度像素小于1400 就收缩左侧菜单
const WatchScreen = (): void => {
	// 获取窗口的宽度和高度, 不包括滚动条, 小于1440收起菜单
	if (document && document.documentElement) {
		emits('collapsed', document.documentElement.clientWidth < 1400);
	}
};

// 获取默认状态和收缩状态下的菜单class名
const cMenuClassName = computed(() => (!props.collapsed ? 'layout-big-menu' : 'layout-small-menu'));
const cMenuOpenKeys = computed(() => {
	const arr = g6StorageValue.get('session', 'menuOpenKeys') || [];
	return arr;
});

const cIconColor = computed(() => {
	return function (path: string) {
		return path === props.actives[0] ? '#F0F6FC' : '#8B949E';
	};
});

const cSelectedKey = computed(() => {
	return [route.meta.menuKey] as string[];
});
const cMenus = computed(() => {
	if (Array.isArray(g6StorageValue.get('session', 'sysMenus'))) {
		const menus = g6StorageValue.get('session', 'sysMenus') as TsGlobalType.TsRoleMenu[];
		const curTop = menus.find((item: TsGlobalType.TsRoleMenu) => item.code === props.topKey);
		return Array.isArray(curTop?.childList) ? (curTop?.childList as TsGlobalType.TsRoleMenu[]) : [];
	}
	return [];
});

onBeforeMount(() => {
	// 监听屏幕响应
	window.addEventListener('resize', WatchScreen);
});

onMounted(() => {
	// 初始化立即执行
	WatchScreen();
});

onBeforeUnmount(() => {
	window.removeEventListener('resize', WatchScreen);
});
</script>

<style lang="less">
.layout-side-menu {
	position: relative;
	z-index: 10;
	display: grid;
	overflow: hidden;
	width: var(--side-width);
	height: calc(100vh - var(--layout-header) - 24px - 24px);
	margin-top: 24px;
	border: 1px solid @borderColor01;
	border-radius: 0 6px 6px 0;
	background: rgba(8, 22, 59, 0.4);
	box-shadow: @shadowL;
	grid-template-rows: 1fr 54px;
	grid-row-gap: 20px;

	.ant-menu-light {
		.ant-menu-item:hover:not(.ant-menu-item-selected, .ant-menu-submenu-selected) {
			color: @text01 !important;

			svg {
				color: @text01 !important;
			}
		}
	}

	.ant-menu {
		height: 100%;
		border: none;
		padding: 8px 12px 0;
		background: transparent;

		.ant-menu-item {
			width: 100%;
			height: 38px;
			margin: 8px 0;
			line-height: 38px;
			color: @text03;

			&:hover {
				border-radius: 6px;
				background: @mask01 !important;
			}

			&:active {
				background-color: transparent !important;
			}
		}

		.ant-menu-submenu {
			.ant-menu-submenu-title {
				height: 38px;
				margin: 8px 0 !important;
				border-radius: 6px;
				line-height: 38px;
				color: @text03 !important;

				&:hover {
					// background-color: rgba(29, 32, 132, 0.05);
				}

				&:active {
					background-color: rgba(29, 32, 132, 0.12);
				}

				.ant-menu-title-content {
					color: @text03;
				}

				.ant-menu-submenu-arrow {
					color: @text03;
				}
			}

			.ant-menu-sub {
				padding: 0;

				li {
					margin-top: 0;
				}
			}
		}

		.ant-menu-submenu-active {
			&:hover {
				color: @text01 !important;
				background-color: transparent !important;
			}

			&:active {
				color: @text01 !important;
				background-color: transparent !important;
			}
		}

		.ant-menu-item-icon {
			line-height: 38px !important;
		}

		// 菜单条目被选中
		.ant-menu-item-selected {
			border-radius: 6px;
			color: @text01;
			background-color: @primary01;

			&:hover {
				background: #305dc2 !important;
			}

			&::after {
				display: none;
			}
		}

		.ant-menu-submenu-selected {
			color: @text01;
		}
	}

	.layout-side-menu-bottom {
		padding: 8px;

		> div {
			display: flex;
			height: 100%;
			border-radius: 6px;
			padding: 0 12px;
			cursor: pointer;
			align-items: center;

			&:hover {
				background-color: rgba(29, 32, 132, 0.05);
			}

			&:active {
				background-color: rgba(29, 32, 132, 0.12);
			}

			svg {
				width: 18px;
				height: 18px;
				cursor: pointer;
			}
		}
	}
}

.layout-big-menu {
	.ant-menu {
		.ant-menu-item {
			padding: 0 24px;
		}
	}
}

.layout-small-menu {
	.ant-menu {
		.ant-menu-submenu {
			height: 38px;
			margin: 8px 0;
			line-height: 38px;
		}
	}

	.layout-side-menu-bottom > div {
		justify-content: center;
	}
}

.ant-menu-submenu-popup {
	border-radius: 6px;
	box-shadow:
		0 3px 6px -4px rgba(37, 37, 45, 0.2),
		0 6px 16px rgba(37, 37, 45, 0.12),
		0 9px 28px 8px rgba(37, 37, 45, 0.05);

	.ant-menu {
		min-width: 96px !important;

		.ant-menu-item {
			display: flex;
			min-width: 96px;
			border-radius: none !important;
			padding: 5px 20px;
			color: @text01 !important;
			align-items: center;
			justify-content: center;

			&:hover {
				background-color: rgba(29, 32, 132, 0.05);
			}

			&:active {
				background-color: rgba(29, 32, 132, 0.05);
			}
		}

		.ant-menu-item-selected {
			background-color: rgba(29, 32, 132, 0.12);
		}
	}
}
</style>
